<script lang="ts" setup>
import { TableSearch } from "@/components/common";
import { ref } from "vue";
import { PowerTableService, PowerFormService } from "./shared/power.service";
import { PowerOperationMap } from "@/modal/commonModal"

const name = 'Power';
// 表格操作
const myTable = new PowerTableService(name);

const { paging, getPatationList, onSearch, onSelectChange } = myTable.usePagin();

// 表单操作
const myService = new PowerFormService(name, myTable.resultList.bind(myTable));

const { modelRef, modelRule, onSubmit } = await myService.useForm();

const myTreeData = myService.treeData;
const showForm = myService.showForm;

const onChangeMenu = myService.onSelectMenu.bind(myService);
const onAdd = myService.onAdd.bind(myService);
const onEdit = myService.onEdit.bind(myService);

</script>

<template>
  <div class="user">
    <TableSearch @onAdd="onAdd" tip="搜索权限" v-model:keyword="myTable.keyword.value" @on-search="onSearch">
    </TableSearch>
    <a-table :row-selection="{ selectedRowKeys: paging.selectedRowKeys, onChange: onSelectChange }"
      :dataSource="paging.dataSource" :columns="paging.columns" :pagination="paging.pagination"
      :loading="paging.loading" rowKey="id" @change="getPatationList" tableLayout="fixed"
      :scroll="{ x: 'max-content' }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'menu.name'">
          <div class="flex items-center flex-wrap">{{ record.menu?.name }}</div>
        </template>
        <template v-if="column.key === 'operation'">
          <a-tag v-for="(tag, index) in record.operation" :key="index" class="mr-base"
            :color="PowerOperationMap[tag].color">{{ PowerOperationMap[tag].name }}</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <div class="flex items-center flex-wrap">
            <a-button class="text-xs" type="primary" size="small" @click="onEdit(record._id)">编辑</a-button>
            <a-popconfirm title="确认删除？" @confirm="myTable.delInfo(record._id)">
              <a-button class="text-xs ml-base" size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
    <a-modal width="640px" v-model:visible="showForm" title="添加权限" @ok="onSubmit">
      <a-form size="small">
        <a-form-item label="菜单" name="menuId" v-bind="modelRule.menuId">
          <a-tree-select v-model:value="modelRef.menuId" show-search style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" allow-clear
            tree-default-expand-all :tree-data="myTreeData" tree-node-filter-prop="label" @change="onChangeMenu">
            <template #title="{ value: val, label }">
              <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
              <template v-else>{{ label }}</template>
            </template>
          </a-tree-select>
        </a-form-item>
        <a-form-item label="名称" name="name" v-bind="modelRule.name">
          <a-input size="large" v-model:value.trim="modelRef.name"></a-input>
        </a-form-item>
        <a-form-item label="编号" name="code" v-bind="modelRule.code">
          <a-input size="large" v-model:value.trim="modelRef.code"></a-input>
        </a-form-item>
        <a-form-item label="排序" name="sortCode" v-bind="modelRule.sortCode">
          <a-input size="large" v-model:value.trim="modelRef.sortCode"></a-input>
        </a-form-item>
        <a-form-item label="权限" name="operation" v-bind="modelRule.operation">
          <a-checkbox-group v-model:value="modelRef.operation" :options="myService.openations" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
